<template>
  <div style="margin-top:-18px">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" class="formModel" style="margin:20px 0 0 20px">
          <a-row :gutter="48">
            <a-col :md="4" :sm="24">
              <a-form-item label="区县">
                <a-input v-model="country" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="日期">
                <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="selectTime" @change="onChange" class="rangePicker" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="资源类型">
                <a-select v-model="queryParam.type" placeholder="请选择资源类型" @change="typeChange">
                  <a-select-option :value="1">标准视频</a-select-option>
                  <a-select-option :value="2">平安福州</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span>
                <a-button type="primary" @click="selectEvent">查询</a-button>
                <a-button type="primary" style="margin-left:8px" @click="daochu">excel导出</a-button>
              </span>
            </a-col>

          </a-row>
        </a-form>
      </div>

      <a-table @change="pageShow" :pagination="pagination" style="margin:0px 20px 20px 20px" :columns="columnstable" :data-source="data" :loading="tableLoading" bordered size="middle" />

    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { getNowTime, getNowFormatDate } from '@/utils/util.js'
import {
  getSafeVideoTotal,
  exportExcelLineVideo,
  exportExcelLineMonitor,
  getlineVideoList,
  getLineMonitorList,
} from '@/api/video'
const data = []
export default {
  components: {},
  data() {
    return {
      columnstablesecond,
      columnstablefirst,
      analisyType: true,
      analisyTypea: false,
      tableLoading: false,
      startTime: '',
      endTime: '',
      selectTime: '',
      columnstable: [],
      data,
      country: '',
      current: 1,
      pageSize: 10,
      searchData: [],
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        type: 1,
      },
      // 加载数据方法 必须为 Promise 对象

      selectedRowKeys: [],
      selectedRows: [],
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
    }
  },
  filters: {},
  created() {
    let nowtime = getNowFormatDate()
    this.selectTime = [moment(nowtime), moment(nowtime)]

    this.startTime = nowtime + ' 00:00:00'
    this.endTime = nowtime + ' 23:59:59'
    this.getLineVideoInfoFunction(this.current, this.pageSize)
  },
  mounted() {
    columnstablefirst[3].title = getNowFormatDate() + '-' + getNowFormatDate()
    columnstablesecond[3].title = getNowFormatDate() + '-' + getNowFormatDate()
    this.columnstable = columnstablefirst
  },
  computed: {},
  methods: {
    moment,
    //导航切换
    typeChange(e) {
      e == 1 ? (this.columnstable = columnstablefirst) : (this.columnstable = columnstablesecond)
      e == 1 ? this.getLineVideoInfoFunction(this.current, this.pageSize) : this.getLineMonitorInfoFunction(this.current, this.pageSize)
    },
    onChange(date, dateString) {
      this.startTime = dateString[0] + ' 00:00:00'
      this.endTime = dateString[1] + ' 23:59:59'
      columnstablefirst[3].title = dateString[0] + '-' + dateString[1]
      columnstablesecond[3].title = dateString[0] + '-' + dateString[1]
      this.columnstable = columnstablefirst
      this.selectTime = [moment(dateString[0]), moment(dateString[1])]
    },
    selectEvent() {
      this.queryParam.type == 1 ? this.getLineVideoInfoFunction(this.current, this.pageSize): this.getLineMonitorInfoFunction(this.current, this.pageSize)
    },
    daochu() {
      this.queryParam.type == 1 ? this.downloadVideo() : this.downloadMonitor()
    },
    downloadVideo() {
      exportExcelLineVideo(this.country,this.startTime,this.endTime)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '在线标准视频.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },
    downloadMonitor() {
      exportExcelLineMonitor(this.country,this.startTime,this.endTime)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '在线平安福州.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },
    //获取标准视频表格数据
    getLineVideoInfoFunction(current, pageSize) {
      this.tableLoading = true
      getlineVideoList(current, pageSize, this.country, this.startTime, this.endTime)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          // 当前值 角标 数组
          this.data = response.data.records.map(function (currentValue, index, arr) {
            currentValue.key = index + 1
            return currentValue
          })

          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //获取平安视频
    getLineMonitorInfoFunction(current, pageSize) {
      this.tableLoading = true
      getLineMonitorList(current, pageSize, this.country, this.startTime, this.endTime)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records.map(function (currentValue, index, arr) {
            currentValue.key = index + 1
            return currentValue
          })
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },

    //分页
    pageShow(pagination) {
      this.queryParam.type == 1
        ? this.getLineVideoInfoFunction(pagination.current, pagination.pageSize)
        : this.getLineMonitorInfoFunction(pagination.current, pagination.pageSize)
    },
  },
}
const columnstablefirst = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 10,
    align: 'center',
  },
  {
    title: '区县',
    dataIndex: 'country',
    width: 100,
    align: 'center',
  },
  {
    title: '维护量',
    align: 'center',
    children: [
      {
        title: '监控量',
        dataIndex: 'monitorNum',
        width: 100,
        align: 'center',
      },
    ],
  },
  {
    title: 'xx年xx月xx日',
    align: 'center',
    children: [
      {
        title: '在线率(每天10点)',
        align: 'center',
        children: [
          {
            title: '在线量',
            align: 'center',
            dataIndex: 'onlineNum',
            width: 100,
          },
          {
            title: '离线量',
            dataIndex: 'offlineNum',
            width: 100,
            align: 'center',
          },
          {
            title: '在线率(在线量/公网量)',
            dataIndex: 'onlineRate',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '已修复故障统计',
        align: 'center',
        children: [
          {
            title: '已修复总量',
            align: 'center',
            dataIndex: 'repairNum',
            width: 100,
          },
          {
            title: '8小时内修复量',
            dataIndex: 'repairEightNum',
            width: 100,
            align: 'center',
          },
          {
            title: '故障修复及时率(8小时内修复量/已修复总量)',
            dataIndex: 'repairRate',
            width: 100,
            align: 'center',
          },
        ],
      },
    ],
  },
]

const columnstablesecond = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 10,
    align: 'center',
  },
  {
    title: '区县',
    dataIndex: 'country',
    width: 100,
    align: 'center',
  },
  {
    title: '维护量',
    dataIndex: 'monitorNum',
    width: 100,
    align: 'center',
  },
  {
    title: 'xx年xx月xx日-xx年xx月xx日',
    align: 'center',
    children: [
      {
        title: '在线率(每天10点)',
        align: 'center',
        children: [
          {
            title: '在线量',
            align: 'center',
            dataIndex: 'onlineNum',
            width: 100,
          },
          {
            title: '在线率(在线量/公网量)',
            dataIndex: 'onlineRate',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '故障率',
        align: 'center',
        children: [
          {
            title: '发生离线量',
            dataIndex: 'offlineNum',
            width: 100,
            align: 'center',
          },
          {
            title: '故障率（累计发生探头量/探头总量）',
            dataIndex: 'repairRate',
            width: 100,
            align: 'center',
          },
        ],
      },
    ],
  },
]
</script>
